/*
  学习目标：JSX-插值表达式 -  数组和对象
  特点： 可以放在等号右边的都是表达式
  1. 变量、 
  2. 基础数据类型： 字符串、 number、boolean 、undefined null、
  3. 引用数据类型： 数组、 对象、函数
  4. 其它： 三元表达式、 逻辑运算符、  JSX本身
*/

// 💥for  if 属于语句，不属于表达式

import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = false;

const divNode = (
  <>
    {/* 三元 */}
    <h2>{isLoading ? '加载中' : '123'}</h2>
    {/* 逻辑且 */}
    <h2>{isLoading && '加载中'}</h2>
    <h2>{!isLoading && '正常显示'}</h2>
    <h3>
      {/* JSX本身 */}
      {<div>123</div>}
    </h3>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
